import Vue from 'vue'
import VueRouter from 'vue-router'
import {getToken} from '@/utils/token'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login/index.vue'),
    meta: { title: '登录页' }
  },

  {
    path: '/layout',
    name: 'layout',
    component: () => import('../views/Layout/index.vue'),
    // 嵌套路由规则
    children: [
      {
        path: 'home', // 会和 父路由的地址 合并 /layout/home
        name: 'home',
        component: () => import('../views/Home/index.vue'),
        meta: {
          title: '主页'
        }
      },
      {
        path: 'hero', // 会和 父路由的地址 合并 /layout/hero
        name: 'hero',
        component: () => import('../views/Hero/index.vue'),
        meta: {
          title: '英雄信息'
        }
      },
      {
        path: 'joke', // 会和 父路由的地址 合并 /layout/joke
        name: 'joke',
        component: () => import('../views/Joke/index.vue'),
        meta: {
          title: '开心一笑'
        }
      },
      {
        path: 'fruit', // 会和 父路由的地址 合并 /layout/joke
        name: 'fruit',
        component: () => import('../views/Fruit/index.vue'),
        meta: {
          title: '水果百科'
        }
      },
      {
        path: '/detail',
        name: 'detail',
        component: () => import('@/views/Fruit/detail.vue'),
        meta: {
          title: '水果详情'
        }
      },
      {
        path: 'ShoppingCart', // 会和 父路由的地址 合并 /layout/ShoppingCart
        name: 'ShoppingCart',
        component: () => import('../views/ShoppingCart/index.vue'),
        meta: { title: '购物车' }
      },
      {
        path: 'info', // 会和 父路由的地址 合并 /layout/joke
        name: 'info',
        component: () => import('../views/Info/index.vue'),
        meta: {
          title: '个人中心'
        }
      },
      {
        path: 'Fruit', // 会和 父路由的地址 合并 /layout/Fruit
        name: 'Fruit',
        component: () => import('../views/Fruit/index.vue'),
        meta: { title: '水果百科' }
      },
      {
        path: 'Noteped', // 会和 父路由的地址 合并 /layout/Noteped
        name: 'Noteped',
        component: () => import('../views/Notepad/index.vue'),
        meta: { title: '备忘录' }
      },
    ]
  },
  {
    path: '*',
    redirect: '/notfound'
  },
  {
    path: '/notfound',
    name: 'notfound',
    component: () => import('../views/NotFound/index.vue'),
    meta: { title: '😃404找不到' }
  }
]

const router = new VueRouter({
  routes
})

// 定义白名单 不需要登录 即可访问的 地址数组
const whiteList = ['/login', '/notfound']

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否在白名单中
  const res = whiteList.includes(to.path)
  if (res === true) {
    // 白名单 直接放走
    next()
  } else {
    // 不在白名单 需要登录
    // const token = localStorage.getItem('token')
    const token = getToken() // 调用工具函数
    // console.log('token:', token)
    if (token === null) {
      // 没有登录 没有token 去登录页
      alert('滚去登录!')
      next('/login')
    } else {
      // 已登录
      next()
    }
  }
})

// 全局 后置守卫
router.afterEach((to, from) => {
  document.title = to.meta.title
})

export default router
